/** * @MSDSDetail.vue * @description MSDS库 化学品详情 * @author zhangjun */
<template>
  <div class="detail-container">
    <!-- 头部模块-->
    <div class="list-header">
      <!-- <div class="list-line"></div> -->
      <img class="header-img" src="@/assets/image/Home.png" alt="" @click="returnToList" />
    </div>
    <!--MSDS 头部名称及按钮-->
    <div class="detail-header">{{ chemicalDetail.zwm }}</div>

    <!--MSDS 名称信息-->
    <div class="detail-name common-style same-top-spacing">
      <div class="content-title normal-character">
        <div class="title-img name-info"></div>
        <div class="title-name">名称信息</div>
      </div>
      <div class="name-info common-style-flex same-background">
        <div class="same-line">
          <div class="first-data">
            <div class="same-title">中文名称</div>
            <div class="same-split">|</div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chemicalDetail.zwm"
              placement="top-start"
            >
              <div class="same-content">{{ chemicalDetail.zwm || '未知' }}</div>
            </el-tooltip>
          </div>
          <div class="second-data">
            <div class="same-title">英文名称</div>
            <div class="same-split">|</div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chemicalDetail.ywm"
              placement="top-start"
            >
              <div class="same-content">{{ chemicalDetail.ywm || '未知' }}</div>
            </el-tooltip>
          </div>
        </div>

        <div class="same-line">
          <div class="first-data">
            <div class="same-title">CAS.NO</div>
            <div class="same-split">|</div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chemicalDetail.cas"
              placement="top-start"
            >
              <div class="same-content">{{ chemicalDetail.cas || '未知' }}</div>
            </el-tooltip>
          </div>
          <div class="second-data">
            <div class="same-title">说明编码</div>
            <div class="same-split">|</div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chemicalDetail.fzs"
              placement="top-start"
            >
              <div class="same-content">{{ chemicalDetail.fzs || '未知' }}</div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <!--MSDS 理化特性-->
    <div class="detail-physicochemical common-style same-top-spacing">
      <div class="content-title normal-character">
        <div class="title-img physicochemical-character"></div>
        <div class="title-name">理化特性</div>
      </div>
      <div class="physicochemical-property common-style-flex same-background">
        <div class="same-line">
          <div class="first-data">
            <div class="same-title">熔点</div>
            <div class="same-split">|</div>
            <div class="same-content">
              {{ chemicalDetail.rd ? chemicalDetail.rd + ' ℃' : '未知' }}
            </div>
          </div>
          <div class="second-data">
            <div class="same-title">沸点</div>
            <div class="same-split">|</div>
            <div class="same-content">
              {{ chemicalDetail.fd ? chemicalDetail.fd + ' ℃' : '未知' }}
            </div>
          </div>
        </div>

        <div class="same-line">
          <div class="first-data">
            <div class="same-title">闪点</div>
            <div class="same-split">|</div>
            <div class="same-content">
              {{ chemicalDetail.sd ? chemicalDetail.sd + ' ℃' : '未知' }}
            </div>
          </div>
          <div class="second-data">
            <div class="same-title">引燃温度</div>
            <div class="same-split">|</div>
            <div class="same-content">
              {{ chemicalDetail.zrwd ? chemicalDetail.zrwd + ' ℃' : '未知' }}
            </div>
          </div>
        </div>

        <div class="same-line">
          <div class="first-data">
            <div class="same-title">爆炸上限</div>
            <div class="same-split">|</div>
            <div class="same-content">{{ chemicalDetail.bzsx || '未知' }}</div>
          </div>
          <div class="second-data">
            <div class="same-title">爆炸下限</div>
            <div class="same-split">|</div>
            <div class="same-content">{{ chemicalDetail.bzxx || '未知' }}</div>
          </div>
        </div>

        <div class="same-line">
          <div class="first-data">
            <div class="same-title">临界温度</div>
            <div class="same-split">|</div>
            <div class="same-content">
              {{ chemicalDetail.ljwd ? chemicalDetail.ljwd + ' ℃' : '未知' }}
            </div>
          </div>
          <div class="second-data">
            <div class="same-title">临界压力</div>
            <div class="same-split">|</div>
            <div class="same-content">{{ chemicalDetail.ljyl || '未知' }}</div>
          </div>
        </div>
        <div class="same-line">
          <div class="one-line">
            <div class="same-title">溶解性</div>
            <div class="same-split">|</div>
            <div class="detail-text" style="line-height: 30px">
              {{ chemicalDetail.rjx || '未知' }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--MSDS 爆燃危险-->
    <div class="detail-detonation same-top-spacing">
      <div class="content-title danger-character">
        <div class="title-img detonation-danger"></div>
        <div class="title-name">爆燃危险</div>
      </div>
      <div class="detonation-info detail-text same-background">
        {{ chemicalDetail.jkwh || '未知' }}
      </div>
    </div>
    <!--MSDS 危险特性-->
    <div class="detail-danger same-top-spacing">
      <div class="content-title normal-character">
        <div class="title-img dangerous-character"></div>
        <div class="title-name">危险特性</div>
      </div>
      <div class="danger-info detail-text same-background">{{ chemicalDetail.wxtx || '未知' }}</div>
    </div>
    <!--MSDS 有害燃烧产物-->
    <div class="detail-harm same-top-spacing">
      <div class="content-title normal-character">
        <div class="title-img harm-burn"></div>
        <div class="title-name">有害燃烧产物</div>
      </div>

      <div class="harm-info detail-text same-background">{{ chemicalDetail.wxfjch || '未知' }}</div>
    </div>
    <!--MSDS 灭火方法-->
    <div class="detail-firefight same-top-spacing">
      <div class="content-title normal-character">
        <div class="title-img firefight-method"></div>
        <div class="title-name">灭火方法</div>
      </div>

      <div class="firefight-info detail-text same-background">
        {{ chemicalDetail.mhff || '未知' }}
      </div>
    </div>
    <!--MSDS 应急处置-->
    <div class="detail-emergency same-top-spacing">
      <div class="content-title normal-character">
        <div class="title-img emergency-handle"></div>
        <div class="title-name">应急处置</div>
      </div>
      <div class="emergency-disposal detail-text same-background">
        {{ chemicalDetail.xlcz || '未知' }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { queryHgMsdsbInfoList } from '@/service'
const props = defineProps({
  checkedChemicalsId: {
    type: Number,
    default: 1,
  },
})
const emit = defineEmits(['changeDetailState'])
const chemicalDetail: any = ref({
  // brwx: '遇明火、高热或与氧化剂接触，有引起燃烧爆炸的危险。与乙酸、乙酸酐、二硫化碳、氯磺酸、盐酸、硝酸、硫酸、发烟硫酸、过氯酸等剧烈反应。能腐蚀铜及其合金。', // 爆燃危险
  // wxtx: '用水喷射逸出液体，使其稀释成不燃性混合物，并用雾状水保护消防人员。灭火剂：水、抗溶性泡沫、干粉、二氧化碳、砂土。', // 危险特性
  // yhrswz: '一氧化碳、二氧化碳、氧化氮。', // 有害燃烧产物
  // mhff: '用水喷射逸出液体，使其稀释成不燃性混合物，并用雾状水保护消防人员。灭火剂：水、抗溶性泡沫、干粉、二氧化碳、砂土。', // 灭火方法
  // yjcz: '迅速撤离泄漏污染区人员至安全区，并进行隔离，严格限制出入。切断火源。建议应急处理人员戴自给正压式呼吸器，穿防', // 应急处置
})
watch(
  () => props.checkedChemicalsId,
  (newVal, oldVal) => {
    if (newVal) {
      getChemicalDetail()
    }
  }
)

const returnToList = () => {
  // store.state.openMSDSData = {} // 将打开的数据清空
  emit('changeDetailState')
}
const getChemicalDetail = () => {
  if (props.checkedChemicalsId) {
    const params = {
      cas: props.checkedChemicalsId,
    }
    queryHgMsdsbInfoList(params).then((res: any) => {
      chemicalDetail.value = res.records[0]
    })
  }
}
onMounted(() => {
  getChemicalDetail()
})
</script>
<style scoped lang="less">
.detail-container {
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  overflow: overlay;
}

.list-header {
  height: 14px;
  display: flex;
  position: relative;
  align-items: flex-end;

  .list-line {
    width: calc(100% - 50px);
    height: 1px;
    background: rgba(0, 255, 222, 0.6);
    display: flex;
    align-items: center;
    margin-left: 13px;
    justify-content: space-between;
  }

  .list-line::before {
    content: ' ';
    display: block;
    width: 9px;
    height: 2px;
    background: #00ffde;
  }

  .list-line::after {
    content: ' ';
    display: block;
    width: 9px;
    height: 2px;
    background: #00ffde;
  }

  .header-img {
    position: absolute;
    cursor: pointer;
    top: 25px;
    right: 15px;
    width: 24px;
    height: 24px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

/******小标题样式***********/
.content-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 9px;

  .name-info {
    background: url('../../../assets/images/chemicalCommand/MSDSList/nameInfo.png') no-repeat;
    background-size: cover;
    margin-right: 7px;
  }

  .detonation-danger {
    background: url('../../../assets/images/chemicalCommand/MSDSList/detonationDanger.png')
      no-repeat;
    background-size: cover;
    margin-right: 7px;
  }

  .physicochemical-character {
    background: url('../../../assets/images/chemicalCommand/MSDSList/physicochemical.png') no-repeat;
    background-size: cover;
    margin-right: 7px;
  }

  .dangerous-character {
    background: url('../../../assets/images/chemicalCommand/MSDSList/dangerCharacter.png') no-repeat;
    background-size: cover;
    margin-right: 7px;
  }

  .harm-burn {
    background: url('../../../assets/images/chemicalCommand/MSDSList/harmBurn.png') no-repeat;
    background-size: cover;
    margin-right: 7px;
  }

  .firefight-method {
    background: url('../../../assets/images/chemicalCommand/MSDSList/firefighter.png') no-repeat;
    background-size: cover;
    margin-right: 7px;
  }

  .emergency-handle {
    background: url('../../../assets/images/chemicalCommand/MSDSList/emergencyHandle.png') no-repeat;
    background-size: cover;
    margin-right: 7px;
  }
}

.title-img {
  width: 19px;
  height: 19px;
}

.title-name {
  font-size: 16px;
}

.normal-character {
  width: 148px;
  height: 30px;
  background: rgba(0, 102, 153, 0.6);
}

.danger-character {
  width: 148px;
  height: 30px;
  background: rgba(204, 18, 18, 0.5);
}

.detail-header {
  font-size: 20px;
  margin-top: 15px;
  margin-left: 10px;
}

/***名称信息-理化特性-公共样式***/
.common-style {
  .common-style-flex {
    .same-line {
      display: flex;
      flex-direction: row;

      .same-title {
        width: 70px;
        height: 30px;
        font-size: 16px;
        font-weight: 400;
        color: #00ffcc;
        line-height: 30px;
        text-align: justify;
        text-align-last: justify;
      }

      .same-content {
        width: 130px;
        height: 30px;
        /*height: ;*/
        font-size: 16px;
        font-weight: 400;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /*.same-title::after {*/
      /*	width: 100%;*/
      /*	content: '';*/
      /*}*/

      .same-split {
        margin: 0 8px;
        font-weight: 400;
        color: #00ffcc;
      }

      .first-data {
        width: 50%;
        display: flex;
        flex-direction: row;
      }

      .second-data {
        width: 50%;
        display: flex;
        flex-direction: row;
      }

      .one-line {
        width: 100%;
        display: flex;
        flex-direction: row;
      }
    }
  }
}

/********7个模块公用样式***********/
.same-top-spacing {
  margin-top: 10px;
}

.same-background {
  width: 100%;
  padding: 16px 11px 15px 17px;
  background: rgba(1, 10, 15, 0.5);
}

.detail-text {
  font-size: 16px;
  font-weight: 400;
}
</style>
